<template>
  <div>
    <Collapse
      copyable
      :collapseData="collapseData"
      v-model:activeKey="activeKey"
      @change="onChange"
    >
      <template #data="{ data }">
        <BasicTable
          :columns="modelsColumns"
          :dataSource="data"
          :canResize="false"
          :loading="false"
          :striped="false"
          :bordered="false"
          :pagination="false"
        />
      </template>
    </Collapse>
  </div>
</template>

<script setup lang="ts">
  import { Collapse } from '@/components/Collapse';
  import { ref, watchEffect } from 'vue';
  import { BasicColumn, BasicTable } from '@/components/Table';

  const modelsColumns: BasicColumn[] = [
    {
      title: '名称',
      dataIndex: 'name',
      fixed: 'left',
      width: 200,
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 150,
      filters: [
        { data: 'Male', value: 'male' },
        { data: 'Female', value: 'female' },
      ],
    },
    {
      title: '说明',
      dataIndex: 'desc',
    },
    {
      title: 'schema',
      dataIndex: 'schema',
      width: 150,
      sorter: true,
    },
  ];

  /**
   * 模拟模型schema
   */
  const modelsSchema = (() => {
    const arr: any = [];
    for (let index = 0; index < 5; index++) {
      arr.push({
        key: `${index}`,
        name: 'John Brown',
        type: `1${index}`,
        desc: `${index + 10}`,
        schema: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
      });
    }
    return arr;
  })();

  const collapseData = ref([
    {
      key: 'FileDTO',
      header: '文件名称',
      data: modelsSchema,
    },
    {
      key: 'FileInfoDTO',
      header: '文件详情',
      data: modelsSchema,
    },
    {
      key: 'FilePageDto',
      header: '文件分页对象',
      data: modelsSchema,
    },
  ]);
  const activeKey = ref(['1']);
  watchEffect(() => {
    console.log('activeKey:', activeKey.value);
  });
  const key = ref('1');
  watchEffect(() => {
    console.log('key:', key.value);
  });

  function onChange(key: any, data: any) {
    console.log('change:', data);
  }
</script>

<style lang="less" scoped></style>
